<template>
  <div>
    <div id="player">
      <div class="playerControls" :style="playerControlsbaim">
        <div class="playkey" @click="playkey">
          <p :class="playflag ? 'playButtondt' : 'playButtonks'"></p>
        </div>
      </div>
      <div class="palyerarea">
        <div class="playerSearch">
          <input
            type="text"
            name=""
            id=""
            v-model="searchdata"
            @keyup.enter="search"
          />
        </div>
        <div
          class="playerareaList"
          v-show="this.audiodata.length != 0"
          :style="listhig"
        >
          <div
            v-for="(itm, index) in audiodata"
            :key="(itm, index)"
            :class="index % 2 == 0 ? 'lisone listds' : 'listwo listds'"
          >
            <p v-text="itm.name" class="audioname"></p>
            <div class="playButtonarea" @click="play(itm.id, index)">
              <p
                :class="listcurrent == index ? 'playButtondt' : 'playButtonks'"
              ></p>
            </div>
          </div>
        </div>
      </div>
      <audio
        :src="audioCurrentUrl"
        class="audio"
        controls
        ref="audio"
        autoplay
      ></audio>
    </div>
  </div>
</template>
<script>
import { audioSearch, audioUrl, audioDetail } from "../api/audioapi";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      searchdata: "",
      audiodata: [],
      listhig: "height: 0rem;",
      playerControlsbaim: "",
      audioCurrentUrl: "",
      audioflag: false,
      listcurrent: undefined,
      playflag: false,
    };
  },
  methods: {
    // 回车列表
    search() {
    if (this.searchdata) {
     audioSearch(this.searchdata).then((res) => {
       this.audiodata = res;
       setTimeout(() => {
         this.listhig = "height: 1.5rem;";
       }, 100);
     });
    }
    },
    // 获得歌曲路径和背景图片
    play(id, ids) {
      audioUrl(id).then((res) => {
        console.log(res);
        this.audioCurrentUrl = res[0].url;
      });
      audioDetail(id).then((res) => {
        this.playflagfun();
        this.setNumber({ ids: ids });
        let url = res.songs[0].al.picUrl;
        this.playerControlsbaim = `background-image: url(${url});`;
      });
    },
    //播放暂停图标
    playkey() {
      this.playflagfun();
    },
    playflagfun() {
      
      if (this.audioCurrentUrl) {
        setTimeout(() => {
          if (this.$refs.audio.paused) {
            this.playflag = true; //浮动球
            this.listcurrent = this.audioids().ids; //列表
            this.$refs.audio.play();
          } else {
            this.playflag = false;
            this.listcurrent = undefined;
            this.$refs.audio.pause();
          }
        }, 0.1);
      }
    },
    ...mapGetters(["audioids"]),
    ...mapMutations(["setNumber"]),
  },
};
</script>

<style lang="less" scoped>

#player {
  display: flex;
  flex-direction: row-reverse;
  opacity: 0.9;
  position: fixed;
  right: 5%;
  top: 30%;
  z-index: 100;
  .playerControls {
    // 浮动球
    width: 1rem;
    height: 1rem;
    border: 0.05rem solid pink;
    border-radius: 50%;
    background-color: #fff;
    z-index: 19;
    background-size: 100% 100%;
    .playkey {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 192, 203, 0.575);
      opacity: 0;
      border-radius: 50%;
      transition: 1s;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    &:hover .playkey {
      opacity: 1;
    }
  }
  .palyerarea {
    //内容总体
    width: 0rem;
    position: relative;
    left: 1rem;
    transition: 1s;
    .playerSearch {
      // 输入框
      width: 100%;
      height: 1rem;
      background-color: #fff;
      font-size: 0.1rem;
      border-radius: 0.5rem;
      z-index: 10;
      transition: 1s;
      opacity: 0;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      align-items: center;
      input {
        transform: translate(-0.4rem, 0px);
        outline: none;
        font-size: 0.15rem;
        width: 2.5rem;
        height: 0.5rem;
        text-align: center;
        color: #aaa;
        border: none;
        border-bottom: 1px solid indianred;
      }
    }
    .playerareaList {
      width: 0%;
      height: 0rem;
      margin: 0 auto;
      background-color: #fff;
      transition: 1s;
      font-size: 00.1rem;
      overflow: auto;
      opacity: 0;

      .listds {
        width: 100%;
        height: 0.5rem;
        overflow: hidden;
        padding: 00.1rem;
        display: flex;
        justify-content: space-around;
        .audioname {
          width: 30%;
          overflow: hidden;
        }
        .playButtonarea {
          width: 0.3rem;
          height: 0.3rem;
          border: 1px solid #111;
          border-radius: 50%;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
      .lisone {
        background-color: #f7f7f7;
      }
    }
  }
  .audio {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
  .playButtondt {
    width: 0;
    height: 0;
    border-radius: 0.1rem solid transparent;
    border-left: 0.1rem solid rgb(0, 0, 0);
    border-top: 0.1rem solid transparent;
    border-bottom: 0.1rem solid transparent;
  }
  .playButtonks {
    width: 0.1rem;
    height: 0.1rem;
    background-color: #111;
  }
  &:hover .palyerarea {
    width: 4rem;
  }
  &:hover .playerSearch {
    opacity: 1;
  }
  &:hover .playerareaList {
    width: 75%;
    opacity: 1;
  }
}
</style>